/**
 * Created with  SublimeText
 * @Author:      Lyle
 * @DateTime:    2016-12-12 16:46:13
 * @Description: 
 */

define(function(require, exports, module) {

    var tabIndex = 0,
        tpl = require('{base}/tpls/myProfilePhoto.tpl'),
        photoDialog = require('{base}/components/photoDialog.js'),
        switchTabJs = require('{base}/tools/plugs/switchTab.js');

    var switchTabPhoto = new switchTabJs({
        containerId: 'myProfile',
        menuTabClass: 'tabTitlePhoto',
        menuTabActionClass: 'action',
        contentTabClass: 'tabContentPhoto',
        callback: function(index) {
            tabIndex = index;
        },
    });

    var component = {

        template: _.template(tpl),

        render: function(page, obj) {
            this.page = page;
            return this.template(this.getTplData());
        },

        componentMount: function() {
            this.bindEvt();
            switchTabPhoto.gotoTabs(tabIndex);
            this.photoRender();
        },

        componentUpdate: function() {
            this.photoRender();
        },

        photoRender: function() {
            $('#' + this.page.id).find('.titlePublic').find('span').html(Share.getUserInfo().pictures.length);
            $('#' + this.page.id).find('.titlePrivate').find('span').html(Share.getUserInfo().private_pictures.length);
            $('#' + this.page.id).find('.public').find('ul').html(this.myProfilePublicPhotoRender());
            $('#' + this.page.id).find('.private').find('ul').html(this.myProfilePrivatePhotoRender());
            $('#' + this.page.id).find('.public').find('ul').imglazyload({ sH: 120, sW: 120, });
            $('#' + this.page.id).find('.private').find('ul').imglazyload({ sH: 120, sW: 120, });
        },

        bindEvt: function() {
            var tthis = this,
                Dom = $('#' + this.page.id).find('.tabBox').find('div[tabname=\'myProfilePhoto\']');
            switchTabPhoto.bindEvt();

            Dom.find('.public .photoList').on('click', 'li img', function(e) {
                tthis.photoDialog(Dom.find('.public .photoList li').index($(e.target).parent()), Share.getUserInfo().pictures)
            });

            Dom.find('.private .photoList').on('click', 'li img', function(e) {
                // console.log(Dom.find('.photoList li').index($(e.target).parent()), $(e.target), 11111)
                tthis.photoDialog(Dom.find('.private .photoList li').index($(e.target).parent()), Share.getUserInfo().private_pictures, 'private')
            });

            Dom.find('.public').on('mouseover', 'input', function(e) {
                var arr = Share.getUserInfo().pictures,
                    text = Util.repalceTpl(Lang.myProfilePhotoButtonTip, [26 - arr.length]);
                Dom.find('.public').find('.addPhoto').find('.des').html(text);
            });

            Dom.find('.public').on('mouseleave', 'input', function(e) {
                Dom.find('.public').find('.addPhoto').find('.des').html(Lang.myProfilePhotoButton);
            });

            Dom.find('.private').on('mouseover', 'input', function(e) {
                var arr = Share.getUserInfo().private_pictures,
                    text = Util.repalceTpl(Lang.myProfilePhotoButtonTip, [26 - arr.length]);
                Dom.find('.private').find('.addPhoto').find('.des').html(text);
            });

            Dom.find('.private').on('mouseleave', 'input', function(e) {
                Dom.find('.private').find('.addPhoto').find('.des').html(Lang.myProfilePhotoButton);
            });

            Dom.find('.public').on('change', 'input', function(e) {
                tthis.upLoadPhoto(e, 'public');
            });

            Dom.find('.private').on('change', 'input', function(e) {
                tthis.upLoadPhoto(e, 'private');
            });
        },

        myProfilePublicPhotoRender: function() {
            var html = '',
                pic = Share.getUserInfo().pictures;

            for (var i in pic) {
                html += '<li><img class="imglazyload"  src=' + Share.placeholderImg() + ' url="' + pic[i].icon + '?r=' + Math.random() + '" /></li>'
            }
            html += this.createAddButton();

            return html;
        },

        myProfilePrivatePhotoRender: function() {
            var html = '',
                pic = Share.getUserInfo().private_pictures;
            for (var i in pic) {
                html += '<li><img class="imglazyload" src=' + Share.placeholderImg() + ' url="' + pic[i].icon + '?r=' + Math.random() + '"/></li>'
            }
            html += this.createAddButton();
            return html;
        },

        createAddButton: function() {
            var html = '<li><div class="addPhoto">' +
                '<input type="file" name="addFile"></input>' +
                '<div class="bg"></div>' +
                '<div class="des"> ' + Lang.myProfilePhotoButton + ' </div>' +
                '</div></li>';
            return html;
        },

        photoDialog: function(index, data, type) {
            photoDialog.render({
                index: index,
                data: data,
                photoType: type,
            });
        },

        getTplData: function() {
            var obj = {
                userInfo: Share.getUserInfo()
            }
            return obj;
        },

        affectOtherChange: function(typeString) {
            if (this.page.myProfilePhotoComponentChange) {
                this.page.myProfilePhotoComponentChange(typeString);
            }
        },

        upLoadPhoto: function(e, photoType) {
            this.upLoadDate(photoType, e.target.files);
        },

        upLoadDate: function(photoType, files) {
            var dom = $('#' + this.page.id),
                tthis = this,
                data = new FormData();

            if (files.length > 0) {
                data.append("file", files[0]);
            } else {
                alert('uploading error!');
                return false;
            }

            data.append("album_type", photoType == 'private' ? 11 : -1);

            var obj = {
                url: seajs.data.vars.apiAccessUrl + 'common_upload_img',
                type: 'POST',
                data: data,
                processData: false,
                contentType: false,
                success: function(data) {
                    console.log(data, photoType);
                    if (data.status_code != 0) {
                        //todo error!
                        alert(data.msg);
                    } else {
                        var userObj = Share.getUserInfo();
                        if (photoType == 'public') {
                            userObj.pictures.push(data);
                        } else if (photoType == 'private') {
                            userObj.private_pictures.push(data);
                        }
                        Util.setSessionStorage("userInfo", JSON.stringify(userObj));
                        if (data.pic_no == 0) {
                            if (photoType == 'public') {
                                tthis.affectOtherChange('mainPhoto');
                            }
                        }
                        tthis.affectOtherChange('photoNum');
                        tthis.componentUpdate();
                    }
                },
                complete: function(xhr, status) {
                    tthis.uploadPhotoAfter(dom);
                }
            };
            tthis.uploadPhotoBefore(dom);
            $.ajax(Share.ajaxControl(obj));
        },

        uploadPhotoBefore: function(dom) {
            if (dom.find('.uploadPhotoIcon').length < 1) {
                var html = '<div class="uploadPhotoIcon"></div>' +
                    '<div class="uploadPhotoText">Uploading...</div>';
                dom.append(html);
            }
        },

        uploadPhotoAfter: function(dom) {
            dom.find('.uploadPhotoIcon').remove();
            dom.find('.uploadPhotoText').remove();
        },

    }

    module.exports = component;
});
